<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script
    type="text/javascript"
    src="https://cdn.bootcdn.net/ajax/libs/bwip-js/3.0.4/bwip-js-min.js"
  ></script>
</head>
<body>
    <canvas id="mycanvas" style="height: 200px; width: 200px;"></canvas>
    <script>
        try {
            // The return value is the canvas element
            let canvas = bwipjs.toCanvas('mycanvas', {
                bcid:        'gs1datamatrix',       // Barcode type
                text:        '(01)06977207240017(10)202403(11)240322(17)270331',    // Text to encode
                scale:       3,               // 3x scaling factor
                height:      50,              // Bar height, in millimeters
                includetext: false,            // Show human-readable text
                textxalign:  'center',        // Always good to set this
            });
            log
        } catch (e) {
            // `e` may be a string or Error object
        }
    </script>
</body>
</html>

// const resizedrag = (target, handler) => {
//     console.log(target.dataset, '---target')
//     let isMoving = false
//     let downX = 0, downY = 0;
//     let { dragBoxWidth, dragBoxHeight } = target.getBoundingClientRect()
//     const eventHandlers = {
//         mousedown: (e) => {
//             isMoving = true
//             const { clientX, clientY } = e
//             downX = target.offsetLeft - clientX
//             downY = target.offsetTop - clientY;
//             console.log(downX, downY, '--->>>mousedown-->>downX, downY')
            
//         },
//         mousemove: (e) => {
//             if(!isMoving) return
//             console.log(e, '---e')
//             e.stopPropagation();
//             e.preventDefault();
//             const { clientX, clientY, movementX, movementY } = e
//             console.log(clientX, clientY, '--->>.clientX, clientY---mousemove')
//             // const diffX = clientX - downX
//             // const diffY = clientY - downY
//             const diffX = movementX > 0 ? clientX + downX : clientX - downX
//             const diffY = movementY > 0 ? clientY + downY : clientY - downY
            
//             // const { x, y } = judgeBoundary(diffX, diffY)
//             // console.log(diffX, diffY, '--->>.diffY, diffY---mousemove')
//             target.style.top = `${diffX}px`
//             target.style.left = `${diffY}px`
//             // target.style.top = `${clientX}px`
//             // target.style.left = `${clientY}px`
//         },
//         mouseup: e => {
//             isMoving = false
//         }
//     }
//     target.addEventListener('mousedown', eventHandlers.mousedown);
//     document.addEventListener('mousemove', eventHandlers.mousemove);
//     document.addEventListener('mouseup', eventHandlers.mouseup);
// }